<!--头部公共部分-->
{include file="common/header" /}
<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
<div style="padding:15px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>用户组</label>
            <div class="layui-input-block">
                {volist name="groups" id="group"}
                    <input type="radio" lay-filter="radio_type" name="group_id" value="{$group['id']}-{$group['group_type']}" class="layui-input" title="{$group['title']}" checked/>
                {/volist}
            </div>
        </div>


        <div class="layui-form-item">
            {if $type == 4}{else/}
            <div class="layui-inline">
                <label class="layui-form-label">区域</label>
                <div class="layui-input-block">
                    <select {if $type == 4}{else/}name="regional_id" lay-verify="required" {/if} lay-filter="regional_id">
                        <option value="">请选择区域</option>
                        {volist name="regional" id="v"}
                        <option value="{$v.id}">{$v.regional_name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            {/if}
			<div class="layui-inline">
				<label class="layui-form-label">校区</label>
				<div class="layui-input-block">
                    {if $type == 4}
                        <input type="hidden" name="campus_id" value="{$campus.id}">
						<input type="text" name="campus_name" readonly autocomplete="off" value="{$campus.campus_name}" class="layui-input">
                    {else/}
                    <select name="campus_id" id="campus_id" disabled>
                    </select>
                    {/if}
                </div>
			</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>手机</label>
            <div class="layui-input-block">
                <input type="number" name="mobile" min="0" id="mobile" lay-verify="required" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>密码</label>
            <div class="layui-input-block">
                <input type="password" name="password"  lay-verify="required" autocomplete="off" placeholder="请输不少于6位的密码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item"  style="display: none" id="div_one">
            <label class="layui-form-label"><span style="color: red;">*</span>姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name"  autocomplete="off" placeholder="请输姓名" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item"  style="display: none" id="div_two">
            <label class="layui-form-label"><span style="color: red;">*</span>姓名</label>
            <div class="layui-input-block">
                <select name="teacher_id" id="teacher_id"  lay-filter="teacher_user" lay-search="">
                    <option value="">请选择老师</option>
                    {volist name="teachers" id="v"}
                    <option value="{$v.id}-{$v.phone}">{$v.teacher_name}({$v.teacher_subject})</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" class="layui-input" title="男" checked/>
                <input type="radio" name="gender" value="2" class="layui-input" title="女"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">绑定小程序</label>
            <div class="layui-input-block">
                <input type="checkbox"  lay-filter="set" title="是否开通小程序?" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item"  id="x-div" style="display: none">
            <label class="layui-form-label">权限选择</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="item" name="ids" title="客户" value="1" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="学员" value="2" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="课程" value="3" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="财务" value="4" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="总览" value="5" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input class="layui-btn" lay-submit lay-filter="form" value="立即提交" readonly>
            </div>
        </div>
    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
    let Last_group = '{$Last_group}';

    if(Last_group == 2 || Last_group == 3){
        document.getElementById("div_one").style.display="none";
        document.getElementById("div_two").style.display="block";
    }else{
        document.getElementById("div_one").style.display="block";
        document.getElementById("div_two").style.display="none";
    }

    layui.use(['element', 'jquery','form','layer'], function(){
        let $ = layui.jquery
                ,element = layui.element
                ,layer = layui.layer
                ,form = layui.form;

        let inputs = document.getElementsByName("ids");
        let center_status = 0;  //0表示未绑定，1表示已绑定
        form.on('checkbox(set)', function(data){

            if(data.elem.checked){
                center_status = 1;
                document.getElementById("x-div").style.display="block";
            }else{
                center_status = 0;
                document.getElementById("x-div").style.display="none";
            }

        });


        /*监听提交*/
        form.on('select(regional_id)', function (data) {
            let regional_id = data.value;
            let ehtml = '';
            $.post('/admin/User/campus/p/1', {
                'regional_id': regional_id
            }, function (response) {
                console.log(response);
                let data = response;
                $.each(data, function (index, element) {
                    console.log(element);
                    ehtml += '<option value="' + element.id + '">' + element.campus_name +
                            '</option>';
                })
                $('#campus_id').html(ehtml)
                if (data) {
                    $('#campus_id').attr('disabled', false);
                } else {
                    $('#campus_id').attr('disabled', true);
                }
                form.render();
            });
        });


        /*监听老师选择*/
        form.on('select(teacher_user)', function (data) {
            let value = data.value;
            $('#mobile').val(value.split("-")[1]);

        });


        form.on('radio(radio_type)', function (data) {
            let value = data.value;
            Last_group =  value.split("-")[1];   //2表示老师类别，3表示助教类别
            if(Last_group == 2 || Last_group == 3){
                document.getElementById("div_one").style.display="none";
                document.getElementById("div_two").style.display="block";

            }else{
                document.getElementById("div_one").style.display="block";
                document.getElementById("div_two").style.display="none";
                $('#mobile').val(null);
                $("#teacher_id").find("option:selected")[0].selected=false;

            }


        });

        let checked_ids = [];
        //监听提交
        form.on('submit(form)', function (data) {


            var name = $('input[name=name]').val();
            var teacher_id = $('select[name=teacher_id]').val();

            if(Last_group == 2 || Last_group == 3){
                if(teacher_id == null || teacher_id.length <= 0){
                    layer.msg("请选择老师姓名");
                    return;
                }
            }else{
                if(name == null || name.length <= 0){
                    layer.msg("请输入姓名");
                    return;
                }
            }


            var field = data.field;

            if(Last_group == 2 || Last_group == 3){
                let teacher_id = $('select[name=teacher_id] option:selected').val().split("-")[0]
                field.teacher_id = teacher_id;
                field.name =$('select[name=teacher_id] option:selected').text();
            }else {
                field.teacher_id = null;
                field.name = $('input[name=name]').val();

            }


            field.group_id = field.group_id.split("-")[0];
            field.company_id = '{$company_id}';
            field.password = $('input[name=password]').val();

            field.mobile = $('input[name=mobile]').val();
            if((field.mobile).length != 11){
                layer.msg('请输正确的11位手机号码');
                return false;
            }
            if(center_status == 1){
                checked_ids = [];
                for(var i=0;i<inputs.length;i++){
                    if(inputs[i].checked){
                        checked_ids.push(inputs[i].value)
                    }
                }
            }

            if(center_status == 1 && checked_ids.length <= 0){
                layer.msg('请选择小程序权限');
                return false;
            }

            if((field.password).length < 6){
                layer.msg('请输不少于6位的密码');
                return false;
            }

            field.status_center = center_status;
            field.auth_rules = checked_ids.join(',');
            var isLoad;
            $.ajax({
                url: '{:url("User/add_campus")}',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.location.reload();
                        }, 2000);
                    }
                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            return false;
        });
    });

</script>